<template>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <TodoHeader  @add="fn"/>

    <!-- 列表区域 -->
    <!-- $event拿到子传父的数据 -->
    <TodoMain :list="list" @deleteById="list.splice($event,1)"/>
    
    <!-- 统计和清空 -->
    <TodoFooter />

    <!-- 测试v-model的原理 -->
    <!--答: v-model是两个指令的而合一 , v-bind:value 和 @input自定义事件而合一 -->
    <!-- 1、父组件定义一个变量，双向绑定给子组件 -->
    <TestModel :value="content" @input="content = $event"/>
    <TestModel v-model="content"/>

  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
import EventBus from './utils/EventBus.js';
import TestModel from './components/TestModel.vue'
//需求1：实现列表道染
//1.定义数组
//2.父传子，通过给子组件标签设置属性和值
//3.子组件通过props属性来接收父组件传递过来的属性和值
//4，在了组件中使用props属性配合v-for列衣

//需求2：实现则除一条数据
//2.1子组件中通过$emit（）方法，向父组件传递一个自定义事件和实参下标或id
//2.2父组件中，@xxx接收子组件传递过来的实参下标或id
//2.3通过下标或id删除数组中的一条数据

//需求3：实现新增
//3.1在Header组件定义定文变量，用来双向绑定
//3.2子组件中，给input框绑定v-model双向绑定
//3.3子组件中，监听entry回车事件
//3.4子传父$emit
//3.5父组件监听事件，添加到数组中




export default {
  created() { 
    //通过EventBus实现父子组件通信
    EventBus.$on('add', (msg) => {
      this.list.unshift({
        id: Date.now(),
        name: msg,
        done: false
      })
    })
    
  },
    data() {
    return {
      //本地存储
      //localStorage 持久化存储   :能存5M数据
      // SessionStorage  绘画存储,将浏览器关闭之后数据会自动清除:能存5M数据
      //取数据：localStorage.getItem('key')
      //存数据：localStorage.setItem('key','字符串类型的值')
      //删除数据：localStorage.removeItem('key')
      //清空数据：localStorage.clear()
      //判断是否已经存在：localStorage.getItem('key')==null
      // Cookie  早期存储数据方法，可以设置生效时间，现在很少用 // 能存4K数据
      list: localStorage.getItem('list') == null ? [] : JSON.parse(localStorage.getItem('list')),
      content:'123'
        };
  },
    watch: {
      list(newValue) {
                localStorage.setItem('list',JSON.stringify(newValue))
        }
    },
  components: { TodoHeader, TodoMain, TodoFooter, TestModel },
    methods: {
        fn(task) {
            this.list.unshift({
              id: Date.now(),
                name: task,
                done: false
            })
        }
    }
}
</script>

<style>

</style>
